<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i> 消息通知</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`未读消息(${unread.length})`" name="first">
                    <el-table :data="unread" :show-header="false" style="width: 100%">
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <span class="message-title">{{scope.row.title}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="content" width="auto"></el-table-column>
                        <el-table-column prop="sendTime" width="180"></el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="handle-row">
                        <el-button type="primary" @click="handleReadAll">全部标为已读</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="`已读消息(${readed.length})`" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="readed" :show-header="false" style="width: 100%">
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="content" width="auto"></el-table-column>
                            <el-table-column prop="sendTime" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger" @click="handleDelAll">删除全部</el-button>
                        </div>
                    </template>
                </el-tab-pane>
                <el-tab-pane :label="`回收站(${recycle.length})`" name="third">
                    <template v-if="message === 'third'">
                        <el-table :data="recycle" :show-header="false" style="width: 100%">
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="content" width="auto"></el-table-column>
                            <el-table-column prop="sendTime" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button @click="handleRestore(scope.$index)">还原</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger" @click.native="handleClearAll">清空回收站</el-button>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import {msgList, readMsg, deleteMsg, restoreMsg} from '../../api/system/message';
    import {getTime} from '../../api/commonUtil';

    export default {
        name: 'tabs',
        data() {
            return {
                toRoleId: JSON.parse(localStorage.getItem('user')).roleId,
                toUserId: JSON.parse(localStorage.getItem('user')).id,
                type: null,
                status: null,
                page: 1,
                limit: 20,
                message: 'first',
                showHeader: false,
                unread: [],
                readed: [],
                recycle: [],
            }
        },
        methods: {
            getMsgList() {
                this.dataListLoading = true
                let that = this;
                let params = {
                    'toRoleId': this.toRoleId,
                    'toUserId': this.toUserId,
                    'type': this.type,
                    'status': this.status,
                    'page': this.page,
                    'limit': this.limit,
                }
                msgList(params).then((res) => {
                    if (res != undefined && res.status && res.data !== null && res.data != undefined) {
                        this.page = parseInt(res.data.currPage)
                        let newList = new Array();
                        //status 0-未读/1-已读/2-删除/3-其他
                        for (let x in res.data.list) {
                            let item = res.data.list[x];
                            item.sendTime = getTime(item.sendTime);
                            item.readTime = getTime(item.readTime);
                            if (item.status === '0') {
                                that.unread.push(item);
                            } else if (item.status === '1') {
                                that.readed.push(item);
                            } else if (item.status === '2') {
                                that.recycle.push(item);
                            }
                        }
                        this.dataList = newList
                    } else {
                        this.$message({
                            message: '加载失败,请稍后尝试！',
                            type: 'error'
                        });
                    }
                    this.dataListLoading = false
                });

            },
            handleReadAll() {
                const items = this.unread;
                let idList = new Array();
                for (let item of items) {
                    idList.push(parseInt(item.id))
                }
                let ids = {"ids": idList.toString()};
                readMsg(ids).then((res) => {
                    if (res != undefined && res.status) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.unread = [];
                        this.readed = items.concat(this.readed);
                    } else {
                        this.$message({
                            message: '操作失败,请稍后尝试！',
                            type: 'error'
                        });
                    }
                });
            },
            handleRead(index) {
                const item = this.unread.splice(index, 1);
                let ids = {"ids": parseInt(item[index].id)};
                readMsg(ids).then((res) => {
                    if (res != undefined && res.status) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.readed = item.concat(this.read);
                    } else {
                        this.$message({
                            message: '操作失败,请稍后尝试！',
                            type: 'error'
                        });
                    }

                });

            },
            handleDelAll() {
                const items = this.readed;
                let idList = new Array();
                for (let item of items) {
                    idList.push(parseInt(item.id))
                }
                let data = {
                    ids : idList.toString(),
                    remove :false
                }
                deleteMsg(data).then((res) => {
                    if (res != undefined && res.status) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.readed = [];
                        this.recycle = items.concat(this.recycle);
                    } else {
                        this.$message({
                            message: '操作失败,请稍后尝试！',
                            type: 'error'
                        });
                    }
                });
            },
            handleDel(index) {
                const item = this.readed.splice(index, 1);
                let data = {
                    ids : parseInt(item[0].id),
                    remove :false
                }
                deleteMsg(data).then((res) => {
                    if (res != undefined && res.status) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.recycle = item.concat(this.recycle);
                    } else {
                        this.$message({
                            message: '操作失败,请稍后尝试！',
                            type: 'error'
                        });
                    }
                });

            },
            handleRestore(index) {
                const item = this.recycle.splice(index, 1);
                let ids = {"ids": parseInt(item[0].id)};
                restoreMsg(ids).then((res) => {
                    if (res != undefined && res.status) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.readed = item.concat(this.readed);
                    } else {
                        this.$message({
                            message: '操作失败,请稍后尝试！',
                            type: 'error'
                        });
                        this.recycle = item.concat(this.recycle);
                    }
                });
            },
            handleClearAll() {
                const items = this.recycle;
                let idList = new Array();
                for (let item of items) {
                    idList.push(parseInt(item.id))
                }
                let data = {
                    ids : idList.toString(),
                    remove :true
                }
                deleteMsg(data).then((res) => {
                    if (res != undefined && res.status) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.recycle = [];
                    } else {
                        this.$message({
                            message: '操作失败,请稍后尝试！',
                            type: 'error'
                        });
                    }
                });
            },
        },
        computed: {
            unreadNum() {
                return this.unread.length;
            }
        },
        mounted() {
            this.getMsgList();
        }
    }

</script>

<style>
    .message-title {
        cursor: pointer;
    }

    .handle-row {
        margin-top: 30px;
    }
</style>

